<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel 文件解析</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/file-saver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
        }
        #fileInput {
            margin-bottom: 20px;
        }
        #result {
            margin-top: 20px;
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        img {
            max-width: 100px;
            max-height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Excel 文件解析</h1>
        <input type="file" id="fileInput" accept=".xlsx, .xls">
        <div id="result"></div>
    </div>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, {type: 'array', cellStyles: true, sheetStubs: true});
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const images = workbook.SSF || [];

                // 获取工作表中的图片
                const sheetImages = workbook.Sheets[firstSheetName]['!images'] || [];

                // 转换工作表数据为JSON
                const jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});

                // 创建表格
                const table = document.createElement('table');
                const thead = document.createElement('thead');
                const tbody = document.createElement('tbody');

                // 处理表头
                const headerRow = document.createElement('tr');
                if (jsonData.length > 0) {
                    jsonData[0].forEach((header, index) => {
                        const th = document.createElement('th');
                        th.textContent = header || `Column ${index + 1}`;
                        headerRow.appendChild(th);
                    });
                    thead.appendChild(headerRow);
                }

                // 处理表格内容
                for (let i = 1; i < jsonData.length; i++) {
                    const row = document.createElement('tr');
                    const rowData = jsonData[i];
                    for (let j = 0; j < rowData.length; j++) {
                        const td = document.createElement('td');
                        
                        // 检查当前单元格是否有图片
                        const cellAddress = XLSX.utils.encode_cell({r: i, c: j});
                        const cellImage = sheetImages.find(img => img.ref === cellAddress);
                        
                        if (cellImage) {
                            // 如果有图片，创建图片元素
                            const img = document.createElement('img');
                            const imgData = cellImage.data;
                            // 这里简化处理，实际中需要根据图片格式正确处理
                            img.src = `data:image/png;base64,${btoa(String.fromCharCode.apply(null, imgData))}`;
                            td.appendChild(img);
                        } else {
                            // 如果没有图片，显示单元格文本
                            td.textContent = rowData[j] || '';
                        }
                        row.appendChild(td);
                    }
                    tbody.appendChild(row);
                }

                table.appendChild(thead);
                table.appendChild(tbody);
                document.getElementById('result').innerHTML = '';
                document.getElementById('result').appendChild(table);
            };
            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>
